<template>
    <div class="invoiceVericicationWrap">
        <el-form
            :model="searchParams"
            size="small"
            label-width="120px"
            class="formInline"
        >
            <el-row>
                <el-col :span="6">
                    <el-form-item label="发票号码：">
                        <el-input
                            v-model="searchParams.hzfpxxqrdbh"
                            placeholder="请输入"
                        ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="纸质发票号码：">
                        <el-input
                            v-model="searchParams.hzfpxxqrdbh"
                            placeholder="请输入"
                        ></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item
                        label="红字确认单申请日期："
                        label-width="140px"
                    >
                        <el-date-picker
                            v-model="selectDate"
                            type="daterange"
                            align="right"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                        ></el-date-picker>
                    </el-form-item>
                </el-col>

            </el-row>

            <el-row>

                <el-col :span="6">
                    <el-form-item label="纸质发票代码：">
                        <el-input
                            v-model="searchParams.hzfpxxqrdbh"
                            placeholder="请输入"
                        ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="发票类型：" label-width="110px">
                        <el-select
                            v-model="searchParams.hzqrxxztdm"
                            placeholder="请选择"
                        >
                            <el-option label="无需确认" value="01"></el-option>
                            <el-option
                                label="销方录入待购方确认"
                                value="02"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col> 
                <el-col :span="12">
                    <el-form-item
                        label="蓝字发票开票日期："
                        label-width="140px"
                    >
                        <el-date-picker
                            v-model="selectDate2"
                            type="daterange"
                            align="right"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                        ></el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>

                <el-col :span="6">
                    <el-form-item label="查验方式：" label-width="110px">
                        <el-select
                            v-model="searchParams.chyydm"
                            placeholder="请选择"
                        >
                            <el-option
                                v-for="item in [
                                    { label: '开票有误', value: '01' },
                                    { label: '销货退回', value: '02' },
                                    { label: '服务中止', value: '03' },
                                    { label: '销售折让', value: '04' },
                                ]"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="查验结果：" label-width="110px">
                        <el-select
                            v-model="searchParams.chyydm"
                            placeholder="请选择"
                        >
                            <el-option
                                v-for="item in [
                                    { label: '开票有误', value: '01' },
                                    { label: '销货退回', value: '02' },
                                    { label: '服务中止', value: '03' },
                                    { label: '销售折让', value: '04' },
                                ]"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <div style="margin-left: 12px;">
                        <el-button type="primary" size="small" @click="getList">
                            查询
                        </el-button>
                        <el-button
                            type="primary"
                            size="small"
                            @click="onResize"
                        >
                            重置
                        </el-button>
                    </div>
                </el-col>
            </el-row>
        </el-form>

        <el-button
            type="primary"
            size="small"
            @click="handlerCheck"
            style="margin: 4px 0"
        >
            人工查验
        </el-button>


        <tableList
            ref="tableRef"
            border
            :heightMin="165"
            :keySet="keySet"
            :autoHeight="true"
            :tableData="listDetails"
            :paginationShow="true"
            :pageNumber="pages.current"
            :pageSize="pages.size"
            :total="pages.total"
            @handleSizeChange="handleSizeChange"
            @handleCurrentChange="handleCurrentChange"
            :radioSelect="true"
            @radioHandleCurrentChange="radioHandleCurrentChange"
            @rowDblclick="rowDblclick"
        >
            <template #ykjhzfpbz="{ row }">
                <div>
                    {{ row.ykjhzfpbz == 'N' ? '未开具' : '已开具' }}
                </div>
            </template>
            <template #hzqrxxztdm="{ row }">
                <div>
                    {{ hzqrxxztdmMap[row.hzqrxxztdm] }}
                </div>
            </template>
            <template #chyydm="{ row }">
                <div>
                    {{ chyyMap[row.chyydm] }}
                </div>
            </template>
        </tableList>
        <vericicationDialog ref="vericicationDialogRef"></vericicationDialog>
        <baseTypeDialog :title-info="titleInfo" ref="baseTypeRef"></baseTypeDialog>
        <airTransport title-info="旅客运输电子客票行程单" ref="airTransport"></airTransport>
        <railway title-info="旅客运输电子客票行程单" ref="railwayRef"></railway>
    </div>
</template>
  
  <script>
import tableList from '@/components/tableList/index.vue'
import { pageConfirm } from '@/api/vmsHzqrdConfirm.js'
//   import addRedConfigDialog from './components/addRedConfigDialog.vue'
import { checkInfoAndRisk, revokeConfirm } from '@/api/vmsHzqrdConfirm.js'
import vericicationDialog from './vericicationDialog.vue'
import baseTypeDialog from '@/components/invoiceTypeTemp/baseType.vue'
  import airTransport from '@/components/invoiceTypeTemp/airTransport.vue'
  import railway from '@/components/invoiceTypeTemp/railway.vue'

export default {
    name: 'redConfirmForm',
    data() {
        return {
            selectDate: ['', ''],
            selectDate2: ['', ''],
            hzqrxxztdmMap: {
                //红字确认信息状态代码
                '01': '无需确认',
                '02': '销方录入待购方确认',
                '03': '购方录入待销方确认',
                '04': '购销双方已确认',
                '05': '作废（销方录入购方否认）',
                '06': '作废（购方录入销方否认）',
                '07': '作废（超72小时未确认）',
                '08': '作废（发起方撤销）',
            },
            selectRow: null,
            addRedConfigDialogShow: false,
            searchParams: {
                chyydm: '',
                creatBy: '',
                hzfpxxqrdbh: '',
                hzqrdsqrqq: '',
                hzqrdsqrqz: '',
                hzqrxxztdm: '',
                lrrqq: '',
                lrrqz: '',
                lzfphm: '',
                lzfpkprqq: '',
                lzfpkprqz: '',
            },

            pages: {
                current: 1,
                size: 10,
                total: 0,
            },
            chyyMap: {
                '01': '开票有误',
                '02': '销货退回',
                '03': '服务中止',
                '04': '销售折让',
            },
            listDetails: [],
            keySet: [
                {
                    label: '发票类型',
                    englishName: 'hzfpxxqrdbh',
                    width: 120,
                },
                {
                    label: '发票号码',
                    englishName: 'lrrq',
                    width: 200,
                },
                {
                    label: '纸质发票代码',
                    englishName: 'qrrq',
                    width: 'labelWidth',
                },
                {
                    label: '纸质发票号码',
                    englishName: 'ykjhzfpbz',
                    width: 'labelWidth',
                    isSlot: true,
                    slotName: 'ykjhzfpbz',
                },

                {
                    label: '开票日期',
                    englishName: 'hzqrxxztdm',
                    width: 180,
                    isSlot: true,
                    slotName: 'hzqrxxztdm',
                },
                {
                    label: '查验日期',
                    englishName: 'chyydm',
                    width: 180,
                    isSlot: true,
                    slotName: 'chyydm',
                },
                {
                    label: '查验结果',
                    englishName: 'hzfphm',
                    width: 'labelWidth',
                },

                {
                    label: '查验方式',
                    englishName: 'hzkprq',
                    width: 150,
                },

                {
                    label: '操作人员',
                    englishName: 'lzfphm',
                    width: 'labelWidth',
                },
                {
                    label: '查验机构',
                    englishName: 'lzkprq',
                    width: 150,
                },
            ],
        }
    },
    created() {
        this.getList()
    },
    methods: {
        rowDblclick(){
            console.log(1)
            // if(this.showSelect % 2 == 1){
            //     this.$refs.baseTypeRef.show()

            // }else if(this.showSelect % 2 == 0){
            //     this.$refs.airTransport.show()

            // }
            // this.$refs.airTransport.show()
            this.$refs.railwayRef.show()


        },
        radioHandleCurrentChange(row) {
            this.selectRow = row
        },
        onResize() {
            this.selectDate = ['', '']
            this.selectDate2 = ['', '']
            this.searchParams = {
                chyydm: '',
                creatBy: '',
                hzfpxxqrdbh: '',
                hzqrdsqrqq: '',
                hzqrdsqrqz: '',
                hzqrxxztdm: '',
                lrrqq: '',
                lrrqz: '',
                lzfphm: '',
                lzfpkprqq: '',
                lzfpkprqz: '',
            }
            this.pages = {
                current: 1,
                size: 10,
                total: 0,
            }
            this.getList()
        },
        handleCurrentChange(val) {
            this.pages.current = val
            this.getList()
        },
        handleSizeChange(val) {
            this.pages.size = val
            this.getList()
        },
        async getList() {
            let params = {
                ...this.searchParams,
                hzqrdsqrqq: this.selectDate[0],
                hzqrdsqrqz: this.selectDate[1],
                lzfpkprqq: this.selectDate2[0],
                lzfpkprqz: this.selectDate2[1],
                pageNo: this.pages.current,
                pageSize: this.pages.size,
            }
            let { data, code, message } = await pageConfirm(params)
            if (code == 200) {
                this.loading = false
                this.listDetails = data.records
                this.pages.total = data.total
                this.pages.current = data.current
                this.pages.size = data.size
                try {
                    this.$refs.tableRef.$refs.table.setCurrentRow()
                } catch (error) {}
            }
        },
        async handlerCheck() {
            this.$refs.vericicationDialogRef.show()
            // let { data, code, message } = await checkInfoAndRisk()
            // if (code == 200) {
            //     sessionStorage.setItem(
            //         'handleDetailInfo',
            //         JSON.stringify({
            //             activeComNumber: '19',
            //             titleInfo: '新增数电红字确认单申请',
            //             searchParams: {},
            //             busType: 'FLOW_HZQRDQR',
            //             busId: '',
            //         })
            //     )
            //     this.addRedConfigDialogShow = true
            //     setTimeout(() => {
            //         this.$refs.addRedConfigDialogRef.show('ADD')
            //     }, 50)
            // } else {
            //     return
            // }
        },
        redVoiceDailogCb(val) {
            this.addRedConfigDialogShow = val || false
            this.getList()
        },


    },
    components: {
        tableList,
        vericicationDialog,
        baseTypeDialog,
        airTransport,
        railway,
    },
}
</script>
  
  <style lang="scss" scoped>
@import '@/style/variables.scss';

.invoiceVericicationWrap {
    box-sizing: border-box;

    .head {
        display: flex;
        height: 18px;
        align-items: center;
        margin-bottom: 4px;
        margin-top: 4px;

        .colCLas {
            width: 4px;
            height: 100%;
            background-color: $allBg;
            margin-right: 12px;
        }

        .info {
            height: 100%;
            display: flex;
            align-items: center;
        }
    }

    .redBG {
        background-color: red;
        border-radius: 10px;
        text-align: center;
        line-height: 150%;
    }

    .bg {
        text-align: center;
    }
}
::v-deep .el-form-item--small.el-form-item {
    margin-bottom: 8px;
}
</style>
  